<template>
    <el-row :gutter="20" style="margin: 0px; padding: 10px; box-sizing: border-box;">
        <!-- 收入分类 -->
        <el-col :span="12">
            <div class="block mt ov">
                <el-tag size="medium" type="primary" class="w300 center">收入分类名称列表</el-tag>
                <el-button icon="el-icon-plus" class="fr" size="mini" type="success" @click="addopen(1)">分类</el-button>
            </div>
            <el-table :data="tableData1" height="600">
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column prop="typename" label="分类名称"></el-table-column>
                <el-table-column label="删除">
                    <template slot-scope="scope">
                        <el-button @click="deltype(scope.row.id,scope.row,1)" icon="el-icon-delete" type="danger" size="mini"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
        <!-- 支出分类 -->
        <el-col :span="12">
            <div class="block mt ov">
                <el-tag size="medium" type="primary" class="w300 center">支出分类名称列表</el-tag>
                <el-button icon="el-icon-plus" class="fr" size="mini" type="success" @click="addopen(2)">分类</el-button>
            </div>
            <el-table :data="tableData2" height="600">
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column prop="typename" label="分类名称"></el-table-column>
                <el-table-column label="删除">
                    <template slot-scope="scope">
                        <el-button @click="deltype(scope.row.id,scope.row,2)" icon="el-icon-delete" type="danger" size="mini"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
</template>
<script>
import C from '@/common/common.js'

export default {
  name: 'costType',
  data () {
    return {
      tableData1: [],
      tableData2: [],
      delid: []
    }
  },
  methods: {
    getmsg: async function () {
      let data = await C.ajax('/shop/cost/getcosttype')
      if (data) {
        var incom = [],
          outgo = []
        for (var j = 0, datalen = data.length; j < datalen; j++) {
          if (data[j].type % 2) {
            incom.push(data[j])
          } else {
            outgo.push(data[j])
          }
        }
        this.tableData1 = incom
        this.tableData2 = outgo
        this.delid = []
      }
    },
    // 新增分类
    addopen: async function (type) {
      let tips = type % 2 ? '请输入新增收入名称' : '请输入新增支出名称'
      C.prompt(tips, async (value) => {
        var reg = /^\s*$/g
        if (value === null || reg.test(value)) {
          return false
        } else {
          await C.ajax('/shop/cost/addtype', { type: type, typename: value }, 'post')
          this.getmsg()
        }
      })
    },
    // 删除分类
    deltype: function (id, index, type) {
      var that = this
      C.confirm('此操作将永久删除该分类, 是否继续?', async () => {
        // 如果delid里面有元素就进行下面的删除
        that.delid.push(id)
        if (this.delid.length) {
          let data = await C.ajax('/shop/cost/deltype', { del: JSON.stringify(this.delid) }, 'post')
          if (data) {
            if (type == 1) {
              let aaa = that.tableData1.indexOf(index)
              that.tableData1.splice(aaa, 1)
            } else {
              let aaa = that.tableData2.indexOf(index)
              that.tableData2.splice(aaa, 1)
            }
            C.success(data.data.info)
          }
          // 将delid置空，重新进行下次操作
          this.delid = []
        }
      })
    }
  },
  mounted: function () {
    this.getmsg()
  }
}
</script>